<script>
    import MusicList from "@/components/MusicList.vue";
    export default {
        name: 'HotMusic',
        data() {
            return {
                list: [], // 音乐列表数据
            }
        },
        components: {
            MusicList
        },
        created() {
            this.getPlaylist();
        },
        methods: {
            // 获取热歌榜的数据
            async getPlaylist() {
                let res = await this.$api.getPlaylist();
                console.log('热歌榜数据', res.data.playlist.tracks);
                this.list = res.data.playlist.tracks;
            }
        }
    }
</script>

<template>
    <div>
        <!--热歌榜的图片-->
        <div class="info">
            <img src="@/assets/images/hot_music_bg_2x.jpg" width="100%" alt="">
        </div>
        <!--热歌列表-->
        <MusicList :list="list" :isShow="false">
            <template v-slot:code="obj">
                <div class="code" :class="{ 'code-red' : obj.index < 3 }">
                    {{ obj.index > 8 ? obj.index + 1 : '0' + (obj.index + 1) }}
                </div>
            </template>
        </MusicList>
        <!--<div class="list" v-for="(item, index) in list" :key="item.id">-->
        <!--    <div class="code" :class="{ 'code-red' : index < 3 }">{{ index > 8 ? index + 1 : '0' + (index + 1) }}</div>-->
        <!--    <div class="list-item">-->
        <!--        <div class="left">-->
        <!--            <div class="subtitle">{{ item.name }} <span>{{ item.alia[0] }}</span></div>-->
        <!--            <div class="author">-->
        <!--                <span v-for="ele in item.ar" :key="ele.id" class="ele">-->
        <!--                    {{ ele.name }}-->
        <!--                </span>-->
        <!--                - {{ item.al.name }}-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="right">-->
        <!--            aa-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->

    </div>
</template>

<style scoped lang="less">
    //.list {
    //    display: flex;
    //
    //    .code {
    //        width: 1rem;
    //        text-align: center;
    //        display: flex;
    //        align-items: center;
    //        justify-content: center;
    //        font-size: 16px;
    //    }
    //
    //    .code-red {
    //        color: #df3436;
    //    }
    //
    //    .list-item {
    //        border-bottom: 1px solid #eeeeee;
    //        padding-left: 10px;
    //        padding-top: 6px;
    //        padding-bottom: 6px;
    //        display: flex;
    //        flex: 1;
    //
    //        .left {
    //            flex: 1;
    //            width: 5.5rem;
    //            overflow: hidden;
    //            text-overflow: ellipsis;
    //            white-space: nowrap;
    //            word-break: normal;
    //
    //            .subtitle {
    //                font-size: 17px;
    //                overflow: hidden;
    //                color: #333333;
    //                text-overflow: ellipsis;
    //                white-space: nowrap;
    //                word-break: normal;
    //
    //                span {
    //                    //font-size: 12px;
    //                    color: #888888;
    //                }
    //            }
    //
    //            .author {
    //                margin-top: 4px;
    //                font-size: 12px;
    //                color: #888888;
    //                overflow: hidden;
    //                text-overflow: ellipsis;
    //                white-space: nowrap;
    //                word-break: normal;
    //
    //                .ele {
    //                    &::after {
    //                        content: '/';
    //                    }
    //                }
    //
    //                .ele:last-child {
    //                    &::after {
    //                        content: '';
    //                    }
    //                }
    //            }
    //        }
    //
    //        .right {
    //            width: 0.9rem;
    //        }
    //    }
    //}

</style>